<template>
	<view class="bg">
		<view class="container">
			<view class="logo">登录</view>
			<input class="input" type="text" placeholder="请输入用户名" v-model="username" />
			<input class="input" type="password" placeholder="请输入密码" v-model="password" />
			<button class="btn" :loading="loading" @click="loginHandle">
				<template v-if="!loading">登录</template>
				<template v-else>登录中...</template>
			</button>
			<view class="links">
				<text class="link" @click="toRegister">注册</text>
				<text class="divider">|</text>
				<text class="link" @click="toForgot">忘记密码</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import { login } from '@/utils/api.js';
import useStorage from '../../utils/useStorage';

const username = ref('18821670757');
const password = ref('123456');

const loading = ref(false);
async function loginHandle() {
	try {
		if (!username.value || !password.value) {
			uni.showToast({ title: '请输入用户名和密码', icon: 'none' });
			return;
		}

		loading.value = true;
		const res = await login({
			type: 'android',
			phone: username.value,
			verify: password.value
		});

		console.log(res);
		useStorage.set('userInfo', res);
		useStorage.set('token', res.token);
		uni.showToast({ title: '登录成功', icon: 'success' });

		setTimeout(() => {
			uni.reLaunch({
				url: '/pages/index/index'
			});
		}, 1000);
	} catch (error) {
		console.log(error);
	}
}

function toRegister() {
	uni.navigateTo({ url: '/pages/register/register' });
}

function toForgot() {
	uni.showToast({ title: '跳转忘记密码页', icon: 'none' });
	// uni.navigateTo({ url: '/pages/forgot/forgot' })
}
</script>

<style scoped lang="scss">
@import '@/common/css/login.scss';
</style>
